<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="../../styles/common.css"/>
    <link rel="stylesheet" href="../../styles/page.css"/>
    <style>
        .search-btn {
            margin-left: 20px;
        }

        .tableBar {
            justify-content: flex-start !important;
        }

        .info-box {
            margin: -15px -44px 20px;
        }

        .info-box .item-box {
            display: flex;
            height: 20px;
            line-height: 20px;
            font-size: 14px;
            font-weight: 400;
            color: #666666;
            text-align: left;
            margin-bottom: 14px;
        }

        .info-box .item-box:last-child {
            margin-bottom: 0;
        }

        .info-box .item-box .label {
            width: 96px;
        }

        .info-box .item-box .des {
            flex: 1;
            color: #333333;
        }

        #container {
            min-width: 310px;
            max-width: 800px;
            margin: 0 auto
        }
    </style>
</head>
<body>
<div class="dashboard-container" id="diagram">
    <!-- 搜索项 -->
    <div class="tableBar">
        <el-date-picker v-model="orderTime"
                        clearable
                        value-format="yyyy-MM-dd HH:mm:ss"
                        type="datetimerange"
                        placeholder="选择日期"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :default-time="['00:00:00', '23:59:59']"
                        style="width: 400px;margin-left: 20px;"
        ></el-date-picker>
        <el-button type="primary" class="search-btn" @click="search">查询</el-button>
    </div>
    <div id="container" style="min-width: 400px; min-height: 600px; margin: 0 auto"></div>
</div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/request.js"></script>
<script src="../../api/sunburst.js"></script>
<script src="../../js/highcharts.js"></script>
<script src="../../js/exporting.js"></script>
<script src="../../js/sunburst.js"></script>

<script>
    new Vue({
        el: "#diagram",
        data() {
            return {
                orderTime: '',
                beginTime: '',
                endTime: '',
                data: []
            }
        },
        async mounted() {
            await this.getSetmealList();
            this.initDiagram();
        },
        watch: {
            orderTime(val) {
                if (val && val.length >= 2) {
                    this.beginTime = val[0]
                    this.endTime = val[1]
                } else {
                    this.beginTime = ''
                    this.endTime = ''
                }
            }
        },
        methods: {
            async search() {
                searchSetmealApi({
                    beginTime: this.beginTime || undefined,
                    endTime: this.endTime || undefined
                }).then(async res => {
                    if (res.code === 1) {
                        this.data = res.data;
                        this.initDiagram();
                    }
                }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                })
            },
            async getSetmealList() {
                const res = await getSetmealListApi();
                if (res.code === 1) {
                    this.data = res.data;
                } else {
                    this.$notify({type: 'warning', message: res.msg});
                }
            },

            // 获取当前年月份
            doHandleDate() {
                var myDate = new Date();
                var tYear = myDate.getFullYear();
                var tMonth = myDate.getMonth();

                var m = tMonth + 1;
                if (m.toString().length === 1) {
                    m = "0" + m;
                }
                return tYear + '-' + m;
            },

            initDiagram() {

                var beginTime = this.beginTime;
                var endTime = this.endTime;
                var showTime;
                if (beginTime === '' || endTime === '') {
                    showTime = this.doHandleDate();
                } else {
                    showTime = beginTime + ' 到 ' + endTime;
                }
                new Highcharts.setOptions({
                    lang: {
                        thousandsSep: ','
                    }
                });
                var data = this.data;

// Splice in transparent for the center circle
                new Highcharts.getOptions().colors.splice(0, 0, 'transparent');


                new Highcharts.chart('container', {

                    chart: {
                        height: '100%'
                    },

                    title: {
                        text: showTime + ' 各分类及套餐销量'
                    },
                    subtitle: {
                        text: ''
                    },
                    series: [{
                        type: "sunburst",
                        data: data,
                        allowDrillToNode: true,
                        cursor: 'pointer',
                        dataLabels: {
                            /**
                             * A custom formatter that returns the name only if the inner arc
                             * is longer than a certain pixel size, so the shape has place for
                             * the label.
                             */
                            formatter: function () {
                                var shape = this.point.node.shapeArgs;

                                var innerArcFraction = (shape.end - shape.start) / (2 * Math.PI);
                                var perimeter = 2 * Math.PI * shape.innerR;

                                var innerArcPixels = innerArcFraction * perimeter;

                                if (innerArcPixels > 16) {
                                    return this.point.name;
                                }
                            }
                        },
                        levels: [{
                            level: 2,
                            colorByPoint: true,
                            dataLabels: {
                                rotationMode: 'parallel'
                            }
                        },
                            {
                                level: 3,
                                colorVariation: {
                                    key: 'brightness',
                                    to: -0.5
                                }
                            }, {
                                level: 4,
                                colorVariation: {
                                    key: 'brightness',
                                    to: 0.5
                                }
                            }]

                    }],
                    tooltip: {
                        headerFormat: "",
                        pointFormat: '<b>{point.name}</b>的销量是：<b>{point.value}</b>'
                    }
                });
            }
        },
    })

</script>
</html>